<template>
	<view class="zaiui-login-content">
		<view class="logo-view">
			<image class="logo" src="/static/logo.jpg" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="title-h">验证</view>
			<view class="introduce">
				<text class="tap" @tap="checking" v-if="!state">重新获取验证码</text>
				<text v-else>{{currentTime}}s 后可重新获取验证码</text>
			</view>
			<view class="zaiui-flex-view checking-view" @tap="showNumLockTap">
				<view class="flex-sub text-center">{{codeKey[0]}}</view>
				<view class="flex-sub text-center">{{codeKey[1]}}</view>
				<view class="flex-sub text-center">{{codeKey[2]}}</view>
				<view class="flex-sub text-center">{{codeKey[3]}}</view>
				<view class="flex-sub text-center">{{codeKey[4]}}</view>
				<view class="flex-sub text-center">{{codeKey[5]}}</view>
			</view>
			<!-- 	<view class="right-tip-view">
				<text>收不到验证码？</text>
				<text class="tap">使用语音验证</text>
			</view> -->
		</view>
		<view class="foot-view">
			<view class="zaiui-btn-view">
				<button class="zaiui-btn" @click="login">进入APP</button>
			</view>
			<view class="font-tag-view">
				<text class="font-tag" @tap="tapLogin">密码登录</text>
				<!-- 				<text class="font-tag">微信登录</text> -->
			</view>
		</view>

		<!--数字键盘-->
		<view class="num-lock-view" :class="NumLock?'show':''" v-if="NumLock">
			<view class="num-lock-head">
				<view class="title" v-if="codeBak == ''">安全数字键盘</view>
				<view class="code-bak-view" v-else>
					<text class="code-text" @tap="codeBakTap">使用: {{codeBak}} </text>
					<text class="cuIcon-close close-icon" @tap="codeBakCloseTap" />
				</view>
				<text class="close" @tap="closeNumLockTap">关闭</text>
			</view>
			<view class="key-grid-list">
				<block v-for="(item,index) in 9" :key="index">
					<view class="key-item" @tap="codeKeyTap(item)">
						<text class="num">{{item}}</text>
					</view>
				</block>
				<view class="key-item">
					<text class="num" />
				</view>
				<view class="key-item" @tap="codeKeyTap(0)">
					<text class="num">0</text>
				</view>
				<view class="key-item" @tap="codeKeyDelTap">
					<text class="cuIcon-close close" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import apis from '@/api/index.js'
	import {
		requestApi
	} from '@/utils/request.js'
	import {
		isEmail
	} from '@/utils/validate.js'
	// 导入公共组件方法
	import common from '@/common/js/common.js';
	export default {
		mixins: [common],
		data() {
			return {
				state: false, //是否开启倒计时
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				currentTime: 0, //显示时间变量
				codeKey: [],
				NumLock: false,
				codeBak: '123456',
				email: ""
			}
		},
		onLoad(e) {
			this.email = e.email
			this.checking();
		},
		onShow() {
			// #ifdef APP-PLUS
			uni.getClipboardData({
				success: res => {
					this.codeBak = res.data;
				}
			});
			// #endif
		},
		methods: {
			checking() {
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				// 开始倒计时
				this.state = true;
				// 获取验证码
				this.sendSms(this.email);
				//执行倒计时
				this.checkingTime();
			},
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			tapLogin() {
				// this.login();
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			showNumLockTap() {
				this.NumLock = true;
			},
			codeKeyTap(index) {
				if (this.codeKey.length < 6) {
					this.codeKey.push(index);
				}
			},
			codeKeyDelTap() {
				this.codeKey.pop();
			},
			closeNumLockTap() {
				this.NumLock = false;
			},
			codeBakTap() {
				let str = this.codeBak;
				let arr = [];
				for (let i = 0; i < str.length; i++) {
					let nstr = str.slice(i, i + 1);
					arr.push(nstr);
				}
				this.codeKey = arr;
				this.codeBak = '';
			},
			codeBakCloseTap() {
				this.codeBak = '';
			},
			login() {
				if (!isEmail(this.email)) {
					uni.showToast({
						icon: 'none',
						title: "邮箱不正确"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000);
					return false;
				}
				let sendStr = ''
				for (var i = 0; i < this.codeKey.length; i++) {
					sendStr = sendStr + this.codeKey[i]
				}
				if (sendStr.length !== 6) {
					uni.showToast({
						icon: 'none',
						title: "请正确输入验证码"
					})
					return false;
				}
				requestApi(apis.login.login, {
					email: this.email,
					code: sendStr
				}, 'POST').then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						uni.setStorageSync("token", res.data.token)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}).catch(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				});
			}
		}
	}
</script>

<style lang="less">
	@import url('@/static/icon.css');
</style>

<style lang="less" scoped>
	@import url('@/static/zaizai/app.less');

	page {
		background-color: #fff;
	}
	.zaiui-login-content{
		background-image: url("../../static/bgc.png");
		min-height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.logo{
		width: 180rpx;
		height: 180rpx;
	}
</style>